import React, { Component } from "react";
// 组件
import MainLayout from "@component/mainLayout/mainLayout";
import Button from "@component/button/index";
import yhTools from "@tools/yh";
import { Icon } from "antd-mobile";

import "./shopPaySuccess.scss";

/**
 * 描述：
 * 作者：zenghq
 * 日期：2021-01-14
 */
class shopPaySuccess extends Component {
	constructor(props) {
		super(props);
		this.state = {};
	}
	/*******************生命周期 start************************/
	// componentDidMount = () => {
	// 	// const { query = {} } = this.props.location;
	// };
	// componentWillUnmount = () => {};
	/*******************生命周期 end************************/

	/*******************业务方法 start************************/
	/*******************业务方法 end************************/

	/*******************点击事件 start************************/
	/*******************点击事件 end************************/

	/**渲染 */
	render() {
		const { query = {} } = this.props.location;
		const { payResult = {} } = query;
		const {
			realPayAmount = "--",
			payAmount = "--",
			couponAmount = "--",
			payDiscountAmount = "--"
		} = payResult;
		const _pageParams = {
			header: {
				title: "支付结果",
				goToApp: true
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="sp_success-box">
					<div className="top-box">
						<div className="sub-title">
							<Icon type="check" size="sm" color="#2FD982" /> 支付成功
						</div>
						<div className="money-box">
							¥<span className="money">{realPayAmount}</span>
						</div>
					</div>

					<ul className="pay_money-item">
						<li>
							<span className="title">应付金额(元)</span>
							<span className="value">{payAmount}</span>
						</li>
						<li>
							<span className="title">支付优惠(元)</span>
							<span className="value coupon_red">-{couponAmount}</span>
						</li>
						<li>
							<span className="title">支付活动(元)</span>
							<span className="value coupon_red">-{payDiscountAmount}</span>
						</li>
					</ul>

					<Button
						onClick={() => {
							yhTools.closePage();
						}}
					>
						返回商城首页
					</Button>
				</div>
			</MainLayout>
		);
	}
}

export default shopPaySuccess;
